<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>Vue 3 生命周期</title>
</head>
<body>
<div id="app">
    <h2>{{ message }}</h2>
    <button @click="change">修改</button>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
      const app = Vue.createApp({
        data() {
            return {
                message: 'Vue生命周期'
            };
        },
        methods: {
            change() {
                this.message = 'Vue生命周期修改';
            }
        },
        beforeMount() {
            console.log('🔵 beforeMount: 组件即将挂载, message =', this.message);
        },
        mounted() {
            console.log('🟢 mounted: 组件已挂载, message =', this.message);
        },
        beforeUpdate() {
            console.log('🟡 beforeUpdate: 组件即将更新, message =', this.message);
        },
        updated() {
            console.log('🟠 updated: 组件已更新, message =', this.message);
        },
        beforeUnmount() {
            console.log('🔴 beforeUnmount: 组件即将卸载, message =', this.message);
        },
        unmounted() {
            console.log('⚫ unmounted: 组件已卸载');
        },
    });

    const vm = app.mount('#app');

    // 5秒后卸载组件，测试 beforeUnmount 和 unmounted
    setTimeout(() => {
        app.unmount();
        console.log('🚀 组件已卸载');
    }, 5000);
</script>
</body>
</html>
